{extend name="default:layout:base" /}

{block name="main"}
<div class="layui-row">
    <div class="layui-col-xs6">
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="70">
                <col >
                <col width="200">
                <col width="100">
            </colgroup>
            <thead>
            <tr>
                <td colspan="4">最近20条聊天记录</td>
            </tr>
            </thead>
            <tbody>
            {volist name="data_list" id="vo"}
            <tr>
                <td>
                    {if condition="!empty($vo.headimgurl)"}
                    <img src="{$vo.headimgurl}" alt="{$vo.headimgurl}" style="width: 60px;">
                    {/if}
                </td>
                <td>
                    <p>{$vo.nickname?:$vo.openid}</p>
                    <p class="msg-type">
                        {switch name="vo.type"}
                        {case value="text"}
                        {$vo.content.Content}
                        {/case}
                        {case value="image"}
                        <a href="javascript:;"
                           class="js-view"
                           data-mediaid="{$vo.content.MediaId}"
                           data-type="{$vo.type}"
                           data-id="{$vo.id}"
                        ><i class="fa fa-picture-o"></i></a>
                        {/case}
                        {case value="video"}
                        <a href="javascript:;"
                           class="js-view"
                           data-mediaid="{$vo.content.MediaId}"
                           data-type="{$vo.type}"
                           data-id="{$vo.id}"
                        ><i class="fa fa-file-movie-o"></i></a>
                        {/case}
                        {case value="voice"}
                        <a href="javascript:;"
                           class="js-view"
                           data-mediaid="{$vo.content.MediaId}"
                           data-type="{$vo.type}"
                           data-id="{$vo.id}"
                        ><i class="fa fa-file-audio-o"></i></a>
                        {/case}
                        {/switch}
                    </p>
                </td>
                <td>{$vo.create_time}</td>
                <td>{if $vo.status}<span style="color: #FF5722">已回复</span>{/if}</td>
            </tr>
            {/volist}
            </tbody>
        </table>
        <script>
            layui.use(['layer', 'jquery'], function () {
                var layer = layui.layer,
                        $ = layui.jquery;

                $('.js-view').on('click', function () {
                    let loading_index = layer.load(1)
                            ,type = $(this).data('type');
                    $.post("{:url('getTempMediaUrlPost')}", {
                        media_id: $(this).data('mediaid'),
                        id: $(this).data('id'),
                    }, function (res) {
                        layer.close(loading_index);
                        if(res.code === 1){
                            let content = '';
                            switch (type) {
                                case 'image':
                                    content = '<img src="url" style="width: 400px;" alt="url">';
                                    break;
                                case 'video':
                                    content = '<video controls style="width: 360px;height: 200px;"><source src="url"  type="video/mp4">\
                                        您的浏览器不支持 HTML5 video 标签。\
                                        </video>';
                                    break;
                                case 'voice':
                                    content = '<audio controls><source src="url" type="audio/mpeg">\
                                        您的浏览器不支持 HTML5 audio 标签。\
                                        </audio>';
                                    break;
                            }
                            layer.open({
                                type: 1,
                                area: ['450px', 'auto'],
                                content: '<div class="media-view">'+content.replace('url', res.data.url)+'</div>'
                            });
                        }else{
                            layer.alert(res.msg);
                        }
                    });
                });
            });
        </script>

        <style>
            .media-view{padding: 10px;text-align: center;min-height: 300px;}
            .msg-type{color: #9a9a9a;margin-top: 10px;}
            .msg-type .fa{font-size: 24px;color: #9a9a9a;}
        </style>
    </div>
    <div class="layui-col-xs6">
        <script src="__LIB__/jquery/jquery-1.11.0.min.js"></script>

        <div class="layui-tab layui-tab-brief" lay-filter="tabBrief">
            <div class="layui-tab-content">
                <form class="layui-form" action="{$post_url ?? ''}" id="ajax-form" method="post">
                    {if condition="!empty($tip)"}
                    <blockquote class="layui-elem-quote">{$tip|raw}</blockquote>
                    {/if}
                    <input type="hidden" id="__token__" name="__token__" value="{:token()}" />
                    {foreach $form_items as $k => $form}
                    {switch name="form.type"}
                    {case value="legend"}{include file="default/builder/formtype/legend" /}{/case}
                    {case value="choose_media"}{include file="default/builder/formtype/choose_media" /}{/case}
                    {/switch}
                    {/foreach}

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                        {if $btn_submit['show']}
                        <button class="layui-btn layui-btn-normal" type="submit">{$btn_submit['text']}</button>
                        {/if}
                        {if $btn_reset['show']}
                        <button type="reset" class="layui-btn layui-btn-primary">{$btn_reset['text']}</button>
                        {/if}
                        </div>
                    </div>

                </form>
            </div>
        </div>
        <script src="__LIB__/jq-module/jquery-validation/jquery.validate.js"></script>
        <script src="__LIB__/jq-module/jquery-validation/localization/messages_zh.js"></script>
        <script>
            layui.use(['form','miniTab'], function(){
                var form = layui.form
                        ,miniTab = layui.miniTab;

                var parent_index = parent.layer.getFrameIndex(window.name);

                //刷新界面 所有元素
                form.render();

                var loading_index;

                //增加扩展规则
                $.validator.addMethod("phone", function(value) {
                    if(value.length){
                        const pattern = /^1[2-9]\d{9}$/;
                        return pattern.test(value);
                    }
                    return true;
                }, '手机号码格式错误');

                /**
                 * 添加、修改的表单提交
                 * @param form
                 */
                $('#ajax-form').validate({
                    errorClass: 'error-msg',
                    submitHandler: function(form) {  //通过之后回调
                        var param = $(form).serialize();
                        $.ajax({
                            url : $(form).attr('action'),
                            method: 'post',
                            data: param,
                            beforeSend: function(){
                                loading_index = layer.load(1);
                            },
                            success : function(res) {
                                switch (res.code) {
                                    case 1:
                                        layer.msg(res.msg, {time: 1500}, function(){
                                            if(res.url){
                                                location.href = res.url;
                                            }else{
                                                if(parent_index){ //表单页为内页的情况
                                                    parent.layer.close(parent_index);
                                                    parent.location.reload();
                                                }else{
                                                    miniTab.deleteCurrentByIframe();
                                                }
                                            }
                                        });
                                        break;
                                    case 0:
                                        $('#__token__').val(res.data.token);
                                        layer.alert(res.msg);
                                        break;
                                    default:
                                        layer.alert(res.msg);
                                        break;
                                }
                            },
                            error: function(request, textStatus){
                                layer.msg('500 Internal Server Error');
                            },
                            complete: function(){
                                layer.close(loading_index);
                            }
                        });
                    },
                    invalidHandler: function(form, validator) {  //不通过回调
                        return false;
                    },
                    //必要的话重写showErrors
                    /*showErrors: function (errorMap, errorList) {
                        $.each(errorList, function (i, v) {
                            layer.tips(v.message, v.element, { time: 2000 });
                            return false;
                        });
                    },
                    // 失去焦点时不验证
                    onfocusout: false*/
                });
            });
        </script>
    </div>
</div>
{/block}





